<template>
  <div class="MyLisk">
    <van-nav-bar
      @click-left="onClickLeft"
      title="最近播放"
      left-arrow
      fixed
      placeholder
    />
    <van-tabs class="channel-tabs" v-model="active" swipeable sticky>
      <van-tab title="歌曲"><van-icon name="play-circle" />播放全部<span class="span1">(394)</span></van-tab>
      <van-tab title="直播">内容 2</van-tab>
      <van-tab title="视频">内容 3</van-tab>
      <van-tab title="声音">播放全部</van-tab>
      <van-tab title="歌单">内容 3</van-tab>
      <van-tab title="专辑">内容 4</van-tab>
      <van-tab title="播单">内容 3</van-tab>
    </van-tabs>
    <list class="listtop" />
  </div>
</template>

<script>
import list from './components/list'
export default {
  components: {
    list
  },
  data () {
    return {
      active: 0
    }
  },
  created () {},
  mounted () {},

  methods: {
    onClickLeft () {
      this.$router.back()
    }
  }
}
</script>

<style scoped lang="less">
/deep/ .channel-tabs {
  position: fixed;
  z-index: 999;
  background: #fff;
  .van-tabs__wrap {
    height: 50px;
  }

  .van-tab {
    min-width: 105px;
    font-size: 25px;
    color: #777777;
  }

  .van-tab--active {
    color: #000;
    font-weight: bolder;
  }

  .van-tabs__nav {
    padding-bottom: 0;
  }

  .van-tabs__line {
    bottom: 5px;
    width: 50px !important;
    height: 10px;
    background-color: #000;
  }
  .van-tab__pane {
    font-size: 35px;
    font-weight: bolder;
    margin: 20px;
  }
  .van-icon-play-circle {
    margin-right: 20px;
    vertical-align: middle;
  }
  .van-icon-certificate {
    vertical-align: middle;
    margin-left: 475px;
  }
}
/deep/ .van-nav-bar__title {
  color: #000;
  font-weight: bolder;
}
/deep/ .van-nav-bar__arrow {
  color: #000;
  font-size: 50px;
}
/deep/ .van-nav-bar__content {
  border: 'none';
}
/deep/ .article-list {
  margin-top: 50px;
}
.listtop {
  margin-top: 150px;
}
.span1 {
  font-weight: 12px;
  font-size: 10px;
}
</style>
